import React, { Component } from 'react';
import { getCity } from '../../api'
import { SideBar, Popup, List } from 'antd-mobile'
import { connect } from 'react-redux'
import { SET_CITY } from '../../store/reducer'

class Index extends Component {
	state = {
		activeKey: "0",
		visible: false
	}
	async getCity() {
		const resp = await getCity()
		this.props.dispatch({ type: SET_CITY, payload: resp.data.data })
	}
	setActiveKey = (key) => {
		this.setState({
			activeKey: key,
			visible: true
		})
	}
	componentDidMount() {
		this.getCity()
	}
	render() {
		const { activeKey, visible } = this.state
		const { city } = this.props
		return (
			<div>
				<SideBar activeKey={activeKey} onChange={this.setActiveKey}>
					{city.map((item, i) => (
						<SideBar.Item key={i} title={item.name} />
					))}
				</SideBar>
				<Popup
					visible={visible}
					onMaskClick={() => {
						this.setState({ visible: false })
					}}
					position='right'
					bodyStyle={{ minWidth: '76vw' }}
				>
					<List>
						{
							city.length > 0 && city[activeKey].city.map((v, i) => {
								return <List.Item key={i}>{v.name}</List.Item>
							})
						}
					</List>
				</Popup>
			</div>
		);
	}
}

export default connect(state => state, dispatch => ({ dispatch }))(Index);
